<template>
  <div class="d_main">
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <!-- <el-button type="primary" size="small" icon="el-icon-plus" v-permission="'MenuCode5-10-3-1'" @click="isAddMange = true">新建</el-button> -->
        <el-dropdown v-if="false" @command="handleCommand">
          <el-button size="small" icon="el-icon-setting">
            批量操作<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown" class="batchOptions">
            <el-dropdown-item command="delete">批量删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="d_search">
        <el-input
          v-model="search.likeWords"
          placeholder="请输入关键字"
          size="small"
          @keyup.enter.native="getAllwarehous"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getAllwarehous"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 操作区 E-->
    <!-- 表格操作区 S-->
    <div class="d_tableOperation">
      <div class="d_condition">

      </div>
      <div class="d_set">
        <div @click="getAllwarehous"><i class="d_icon el-icon-refresh-right" /></div>
        <div class="setting flex">
          <HeadSeting :list-data.sync="tableHead" :table-code="$config.warehouselist" @reset="getTableHead" />
        </div>
      </div>
    </div>
    <!-- 表格操作区 E-->
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length>0"
        id="emtable"
        ref="multipleTable"
        v-loading="tabLoading"
        :data="allDatas"
        :height="tableHeight || 'auto'"
        border
        :summary-method="getSummaries"
        show-summary
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
      >
        <!-- 复选框       -->
        <!--        <el-table-column type="selection" width="40" fixed="left" />-->
        <template v-for="(fruit,index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 100"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat?'left':false"
          >
            <template slot-scope="scope">
              {{ scope.row[fruit.columnCode] }}
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70px" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                        <!-- <li
                          v-if="scope.row.warehouseState===1"
                           v-permission="'MenuCode5-10-3-3'"
                          @click="optionsClick('enable',scope.row)"
                        >禁用
                        </li> -->
                        <li
                          v-if="scope.row.warehouseState===0"
                           v-permission="'MenuCode5-10-3-2'"
                          @click="optionsClick('enable',scope.row)"
                        >启用
                        </li>
                      <li v-permission="'MenuCode5-10-3-4'" @click="optionsClick('modify',scope.row)">修改</li>
                      <li v-permission="'MenuCode5-10-3-6'" @click="optionsClick('locatorSeting',scope.row)">库位设置</li>
                      <!-- <li v-permission="'MenuCode5-10-3-5'" @click="optionsClick('nullify',scope.row)">作废</li> -->
                  </ul>
                </div>
                <div slot="reference" class="pl10 opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div class="p16" v-if="tableHead.length==0">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total||0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getAllwarehous"
      />
    </div>
    <!-- 分页 E-->
    <!-- 仓库新建   -->
    <el-dialog
      title="新建仓库"
      :visible.sync="isAddMange"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form ref="addWareForm" :model="addWareForm" :rules="rules" label-width="90px" class="dialogForm">
          <el-form-item label="仓库编号">
            <el-input v-model="addWareForm.warehouseCode" placeholder="系统自动生成" size="mini" disabled />
          </el-form-item>
          <el-form-item label="仓库名称" prop="warehouseName">
            <el-input v-model="addWareForm.warehouseName" placeholder="请输入仓库名称" size="mini" />
          </el-form-item>
          <el-form-item label="仓库类型" prop="warehouseType">
            <el-select
                        filterable v-model="addWareForm.warehouseType" filterable placeholder="请输入仓库名称" size="mini">
              <el-option
                v-for="item in wareType"
                :key="item.dicValueID"
                :label="item.dicValueDesc"
                :value="item.dicValueCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司">
            <el-select
                        filterable v-model="addWareForm.organizationCode" filterable placeholder="请输入仓库名称" size="mini">
              <el-option
                v-for="item in organizations"
                :key="item.orgCode"
                :label="item.orgName"
                :value="item.orgCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库管理员">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input v-model="wareShowper" placeholder="选择人员" size="mini" disabled />
              </div>
              <div class="ml10 btnPer">
                <el-button type="primary" size="mini" icon="el-icon-user" @click="isperShow=true">选择人员</el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="addWareForm.warehouseTel" placeholder="请输入联系电话" size="mini" />
          </el-form-item>
          <el-form-item label="仓库地址">
            <el-cascader
              v-model="addWareForm.areas"
              size="mini"
              :options="address"
              :props="{label:'areaName',value:'areaCode'}"
              @change="areaChange"
            />
          </el-form-item>
          <el-form-item label="" class="mt5">
            <el-input v-model="addWareForm.warehouseAddress" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input v-model="addWareForm.warehouseDesc" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddMange=false">取 消</el-button>
        <el-button
            :loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addSave"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 仓库修改   -->
    <el-dialog
      title="仓库编辑"
      :visible.sync="iswareEdit"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form ref="addWareForm" :model="addWareForm" :rules="rules" label-width="90px" class="dialogForm">
          <el-form-item label="仓库编号">
            <el-input v-model="addWareForm.warehouseCode" placeholder="系统自动生成" size="mini" disabled />
          </el-form-item>
          <el-form-item label="仓库名称" prop="warehouseName">
            <el-input v-model="addWareForm.warehouseName" placeholder="请输入仓库名称" size="mini" />
          </el-form-item>
          <el-form-item label="仓库类型" prop="warehouseType">
            <el-select
                        filterable v-model="addWareForm.warehouseType" placeholder="请选择仓库类型" size="mini">
              <el-option
                v-for="item in wareType"
                :key="item.dicValueID"
                :label="item.dicValueDesc"
                :value="item.dicValueCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司">
            <el-select
                        filterable v-model="addWareForm.organizationCode" placeholder="请输入仓库名称" size="mini">
              <el-option
                v-for="item in organizations"
                :key="item.orgCode"
                :label="item.orgName"
                :value="item.orgCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库管理员">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input v-model="wareShowper" placeholder="选择人员" size="mini" disabled />
              </div>
              <div class="ml10 btnPer">
                <el-button type="primary" size="mini" icon="el-icon-user" @click="isperShow=true">选择人员</el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="addWareForm.warehouseTel" placeholder="请输入联系电话" size="mini" />
          </el-form-item>
          <el-form-item label="仓库地址">
            <el-cascader
              v-model="addWareForm.areas"
              size="mini"
              :options="address"
              :props="{label:'areaName',value:'areaCode'}"
              @change="areaChange"
            />
          </el-form-item>
          <el-form-item label="" class="mt5">
            <el-input v-model="addWareForm.warehouseAddress" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input v-model="addWareForm.warehouseDesc" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="iswareEdit=false">取 消</el-button>
        <el-button
            :loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addEditSave"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 人员寻找弹框   -->
    <per-redio-dialog :per-visible.sync="isperShow" @getEmployee="getEmployee" />
    <!-- 设置库位弹框   -->
    <el-dialog
      title="设置库位"
      :visible.sync="isReservoir"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody reservoirBox flex flex_column">
        <div class="tipTT">
          <ul class="flex">
            <li class="flex mr15">
              <span>仓库名称：</span><span class="c_333333">{{ rowTabels.warehouseName }}</span>
            </li>
            <li class="flex mr15">
              <span>仓库类型：</span><span class="c_333333">{{ rowTabels.warehouseTypeName }}</span>
            </li>
            <li class="flex mr15">
              <span>创建日期：</span><span class="c_333333">{{ rowTabels.createDate }}</span>
            </li>
            <li class="flex mr15">
              <span>创建人员：</span><span class="c_333333">{{ rowTabels.createPersonName }}</span>
            </li>
          </ul>
        </div>
        <div class="flexs flex1" style="width: 100%">
          <div class="lfReservoir">
            <div class="p16">
              <el-button
                type="primary"
                class="mr5 w100"
                block
                size="small"
                icon="el-icon-plus"
                @click="addAreas = true"
              >创建库区
              </el-button>
            </div>
            <div class="reList">
              <ul id="areasList">
                  <li  v-for="(item,index) in Reservoirs" :key="index" class="flex flex_between reAll" :class="crtIndex===index?'crt':''" @click="isAreasing?changeAreas(item,index):''">
                    <div>
                      <i class="iconfont folderIco mr5 f22" style="color: #83A0FF;" /> {{ item.areaName }}
                    </div>
                    <div v-if="index!=0" class="kuOP">
                      <el-popover
                        :ref="`popover-${index}`"
                        placement="bottom"
                        popper-class="areasPopover"
                        trigger="click"
                      >
                        <div class="areasOp">
                          <ul>
                            <li @click="updateAreas(item)">修改</li>
                            <li @click="addLocation = true">新增库位</li>
                            <li @click="deleteArea(item)">删除</li>
                          </ul>
                        </div>
                        <span slot="reference" class="el-icon-more c_3F61F1" />
                      </el-popover>
                    </div>
                  </li>
              </ul>
            </div>
          </div>
          <div class="flex1 flex flex_column rgRewBox">
            <div class="btnCon flex flex_between">
              <div class="plop">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addLocation = true">
                  新建库位
                </el-button>
              </div>
              <!--      搜索框-->
              <div class="search">
                <el-input
                  v-model="locationSearch.likeWords"
                  placeholder="输入关键字"
                  size="small"
                >
                  <el-button
                    slot="append"
                    :loading="!isAreasing"
                    type="primary"
                    icon="el-icon-search"
                    :disabled="!isAreasing"
                    element-loading-spinner="el-icon-loading"
                    @click="getMatchAllAreas"
                  >
                    搜索
                  </el-button>
                </el-input>
              </div>
            </div>
            <div ref="tableCon" class="tableCon locationtable lastTdNoBorder">
              <el-table
                id="emtable"
                v-loading="tabLoading"
                :data="ReservoirsTables"
                border
                fit
                style="width: 100%"
              >
                <el-table-column
                  label="库位名称"
                  prop="areaShelfName"
                >
                </el-table-column>
                <el-table-column
                  prop="isEnabledName"
                  label="库位状态"
                />
                <el-table-column
                  prop="areaCodeName"
                  label="所属库区"
                />
                <el-table-column label="操作" width="70px" fixed="right">
                  <template slot-scope="scope">
                    <div>
                      <el-popover
                        :ref="`popover-${scope.$index}`"
                        placement="bottom-end"
                        popper-class="tableOp"
                        width="160"
                        :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                        trigger="click"
                      >
                        <div class="operation">
                          <ul v-for="(arry,arryIndex) in LocationOperations" :key="arryIndex">
                            <template v-for="(op,opIndex) in arry">
                              <template v-if="op.key==='enable'">
                                <li
                                  v-if="scope.row['isEnabled']===1"
                                  :key="opIndex"
                                  @click="locationClick(op.key,scope.row)"
                                >禁用
                                </li>
                                <li
                                  v-if="scope.row['isEnabled']===0"
                                  :key="opIndex"
                                  @click="locationClick(op.key,scope.row)"
                                >启用
                                </li>
                              </template>
                              <li v-else :key="opIndex" @click="locationClick(op.key,scope.row)">{{ op.text }}</li>
                            </template>
                          </ul>
                        </div>
                        <div slot="reference" class="pl10 opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                      </el-popover>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!--    分页-->
            <div class="paginaCon locationPagina">
              <pagination :total="wareAreasToal||0" :page.sync="locationSearch.pageIndex" :limit.sync="locationSearch.pageSize" @pagination="getMatchAllAreas" />
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isReservoir=false">取 消</el-button>
        <el-button
          v-loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="isReservoir=false"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新建库区   -->
    <el-dialog
      title="新建库区"
      :visible.sync="addAreas"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeAreasDialog"
    >
      <div class="dialogDody">
        <el-form ref="addAreasForm" :model="addAreasForm" :rules="areasRules" label-width="80px" class="dialogForm">
          <el-form-item label="库区名称" prop="areaName">
            <el-input v-model="addAreasForm.areaName" placeholder="请输入库区名称" size="mini" clearable>
              <template slot="append">区</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addAreas=false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          :disabled="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveAreas"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 修改库区   -->
    <el-dialog
      title="修改库区"
      :visible.sync="editAreas"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeAreasDialog"
    >
      <div class="dialogDody">
        <el-form ref="editAreasForm" :model="addAreasForm" :rules="areasRules" label-width="80px" class="dialogForm">
          <el-form-item label="库区名称" prop="areaName">
            <el-input v-model="addAreasForm.areaName" placeholder="请输入库区名称" size="small" clearable>
              <template slot="append">区</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editAreas=false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          :disabled="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="editSave"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 新建库位   -->
    <el-dialog
      title="新建库位"
      :visible.sync="addLocation"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeLocationDialog"
    >
      <div class="dialogDody">
        <el-form ref="addLocationForm" :model="addLocationForm" :rules="locationRules" label-width="100px" class="dialogForm">
          <el-form-item label="所属库区" prop="areaCode">
            <el-select
                        filterable v-model="addLocationForm.areaCode" placeholder="请选择" size="mini">
              <el-option
                v-for="item in Reservoirs"
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="新增库位数" prop="areaShelfCount">
            <el-input v-model.number="addLocationForm.areaShelfCount" type="number" placeholder="请输入新增库位数" size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addLocation=false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          :disabled="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="savelocation"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import HeadSeting from '@/components/HeadSeting'
import perRedioDialog from '@/components/perDialogRedio'
import { arraySort } from '@/utils'

export default {
  name: 'Warehouse',
  components: { Pagination, HeadSeting, perRedioDialog },
  data() {
    return {
      addperLoading: false,
      editAreas: false,
      addAreas: false,
      addAreasLoading: false,
      addLocation: false,
      isAreasing: true,
      iswareEdit: false, // 修改仓库弹框
      isReservoir: false, // 设置库位弹框是否打开
      isAddMange: false, // 打开新建仓库管理弹框
      tableHeight: null, // 表格最高高度
      total: 0, // 仓库管理列表总条数
      allDatas: [], // 所有表格管理数据
      checkedData: [], // 已选人员
      tabLoading: false, // 表格数据加载
      tableHead: [], // 仓库管理列表表头
      searchLoading: false, // 搜索按钮loading
      isperShow: false, // 选择人员弹框是否显示
      departData: [], // 当前组织架构对应得部门
      rowTabels: [], // 当前行得tabel数据
      Reservoirs: [], // 所有分区数据
      ReservoirsTables: [], // 仓库分区分页
      crtIndex: 0, // 库区选中索引
      isEnabled: null, // 是否启用、禁用
      warehouseID: null, // 仓库ID
      // 仓库列表搜索条件
      search: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: '',
        organizationCode: '',
        warehouseState: -1
      },
      areasSearch: {
        warehouseCode: '',
        warehouseAreaState: '',
        likeWords: ''
      },
      // 库位搜索条件
      locationSearch: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: '',
        warehouseCode: '',
        warehouseAreaCode: '',
        areaShelfState: -1
      },
      wareAreasToal: null, // 总得仓库分区数据条数
      // 表格操作按钮
      operations: [
        [{ text: '修改', key: 'modify' }],
        [{ text: '库位设置', key: 'locatorSeting' }],
        [{ text: '启用', key: 'enable' }],
        [{ text: '作废', key: 'nullify' }]
      ],
      LocationOperations: [
        [{ text: '启用', key: 'enable' }]
      ],
      // 新建库区表单
      addAreasForm: {
        warehouseCode: '',
        areaName: '',
        areaManager: '',
        areaDesc: ''
      },
      // 新建库位
      addLocationForm: {
        warehouseCode: '',
        areaCode: '',
        areaShelfCount: ''
      },
      // 新建仓库表单
      addWareForm: {
        warehouseName: '',
        organizationCode: '',
        warehouseType: '',
        warehouseManager: '',
        warehouseTel: '',
        province: '',
        city: '',
        country: '',
        warehouseAddress: '',
        warehouseDesc: '',
        warehouseCode: '',
        areas: [] // 省市区数组
      },
      wareShowper: '', // 仓库管理员展示字段
      address: [], // 地址联动数据
      organizations: [], // 所有组织架构(公司)
      wareType: [], // 仓库类型
      rules: {
        warehouseName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        warehouseType: [
          { required: true, message: '请选择仓库类型', trigger: 'blur' }
        ]
      },
      areasRules: {
        areaName: [
          { required: true, message: '请输入库区名称', trigger: 'blur' }
        ]
      },
      locationRules: {
        areaCode: [
          { required: true, message: '请选择具体库区', trigger: 'blur' }
        ],
        areaShelfCount: [
          { required: true, message: '请输入新增库位数量', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 获取仓库管理列表表格表头
    this.getTableHead()
    // 得到所有仓库列表
    this.getAllwarehous()
    // 获得仓库类型数据
    this.getWareData()
    // 地区联动数据
    this.getArea()
    //  获取所有组织架构
    this.getOrganization()
    // 所有仓库分区
    this.getAllAreas()
    // 当前仓库分区下得仓库库位数据
    this.getMatchAllAreas()
  },
  mounted() {
    // 表格高度
    this.calHeight()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout()
    })
  },
  methods: {
    // 合计方法
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (column.property === 'areaShelfCount' || column.property === 'goodsGlobalValue') {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index]++
          } else {
            sums[index] = ' '
          }
        }
      })

      return sums
    },
    // 修改库区
    updateAreas(item) {
      this.editAreas = true
      const parmas = {
        queryBy: 1,
        queryValue: item.areaID.toString()
      }
      this.$api.warehouse.getAreasInfo(parmas).then(res => {
        this.addAreasForm = res
        this.addAreasForm.areaName = res.areaName.split('区')[0]
      })
    },
    // 删除库区
    deleteArea(item) {
      const parmas = {
        entityID: item.areaID
      }
      this.$confirm('确定删除该仓库分区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.warehouse.deleteArea(parmas).then(() => {
          this.getAllAreas()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 保存修改库区
    editSave() {
      const formData = this.addAreasForm
      formData.areaName = this.addAreasForm.areaName + '区'
      const parmas = formData
      this.addAreasLoading = true
      this.$refs.editAreasForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse.savaUpadateArea(parmas).then(() => {
            this.addAreasLoading = false
            this.editAreas = false
            this.getAllAreas()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).catch(() => {
            this.addAreasLoading = false
          })
        }
      })
    },
    // 保存库区
    saveAreas() {
      const formData = this.addAreasForm
      formData.areaName = this.addAreasForm.areaName + '区'
      const parmas = formData
      this.addAreasLoading = true
      this.$refs.addAreasForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse.AddWarehouseArea(parmas).then(() => {
            this.addAreasLoading = false
            this.addAreas = false
            this.getAllAreas()
            this.$message({
              message: '新增成功',
              type: 'success'
            })
          }).catch(() => {
            this.addAreasLoading = false
          })
        }
      })
    },
    changeAreas(item, index) {
      this.locationSearch.warehouseAreaCode = item.areaCode
      this.addLocationForm.areaCode = item.areaCode
      this.crtIndex = index
      this.getMatchAllAreas()
    },
    // 新建库位
    savelocation() {
      const parmas = this.addLocationForm
      this.$refs.addLocationForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse.addLocation(parmas).then(() => {
            this.addAreasLoading = false
            this.addLocation = false
            this.getMatchAllAreas()
            this.$message({
              message: '新增库位成功',
              type: 'success'
            })
          }).catch(() => {
            this.addAreasLoading = false
          })
        }
      })
    },
    // 保存编辑仓库数据
    addEditSave() {
      const parmas = this.addWareForm
      this.addperLoading = true
      this.$api.warehouse.saveUpateWareHouse(parmas).then(() => {
        this.addperLoading = false
        this.iswareEdit = false
        this.getAllwarehous()
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
      }).catch(() => {
        this.addperLoading = false
      })
    },
    // 仓库修改数据回显
    getWareInfo(id) {
      const parmas = {
        queryBy: 1,
        queryValue: id.toString()
      }
      this.$api.warehouse.getwareaInfo(parmas).then(res => {
        this.addWareForm = res
        this.wareShowper = res.warehouseManagerName
        const arry = []
        arry.push(res.province, res.city, res.country)
        this.addWareForm.areas = arry
      })
    },
    // 库位表格行操作
    locationClick(key, data) {
      if (key === 'delete') {
        const parmas = {
          entityID: data.areaShelfID
        }
        this.$confirm('确定删除该库位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除
          this.$api.warehouse.deleLocation(parmas).then(() => {
            this.getMatchAllAreas()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        })
      } else if (key === 'enable') {
        const parmas = {
          entityID: data.areaShelfID,
          isDisabled: Boolean(data.isEnabled)
        }
        this.$confirm('确定启用/禁用该库位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除
          this.$api.warehouse.IsDisabledWarehouseAreaShelf(parmas).then(() => {
            this.getMatchAllAreas()
            this.$message({
              message: '设置成功',
              type: 'success'
            })
          })
        })
      }
    },
    // 当前仓库所有库区
    getAllAreas() {
      const parmas = this.areasSearch
      this.$api.warehouse.GetMatchWarehouseAreas(parmas).then(res => {
        const item = {
          warehouseCode: '',
          areaCode: '',
          areaName: '全部',
          areaManager: '',
          areaDesc: ''
        }
        this.Reservoirs = res
        this.Reservoirs.unshift(item)
        this.locationSearch.areaCode = res ? res[1] : ''
      })
    },
    // 当前库区下得仓库库位数据
    getMatchAllAreas() {
      const parmas = this.locationSearch
      this.isAreasing = false
      this.$api.warehouse.GetMatchPageWarehouseAreas(parmas).then(res => {
        this.ReservoirsTables = res.list
        this.isAreasing = true
        this.wareAreasToal = res.totalCount
      }).catch(() => {
        this.isAreasing = true
      })
    },
    // 得到仓库管理员
    getEmployee(val) {
      this.addWareForm.warehouseManager = val.employeeCode
      this.wareShowper = val.employeeName
      this.addWareForm.warehouseTel = val.mobile
    },
    // 新建仓库
    addSave() {
      const parmas = this.addWareForm
      this.addperLoading = true
      this.$refs.addWareForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse.AddWarehouse(parmas).then(() => {
            this.addperLoading = false
            this.isAddMange = false
            this.wareShowper = '' // 清空管理员展示字段内容
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.getAllwarehous()
          }).catch(() => {
            this.addperLoading = false
          })
        }
      })
    },
    // 选择地址
    areaChange(val) {
      this.addWareForm.province = val ? val[0] : ''
      this.addWareForm.city = val ? val[1] : ''
      this.addWareForm.country = val ? val[2] : ''
    },
    // 获取所有组织架构
    getOrganization() {
      this.$api.user.getAllOrganizations().then(res => {
        this.organizations = res
        this.addWareForm.organizationCode = res ? res[0].orgCode : ''
      })
    },
    // 得到所有仓库列表
    getAllwarehous() {
      const parmas = this.search
      this.$api.warehouse.GetWarehousePageDataList(parmas).then(res => {
        this.allDatas = res.list
        this.allDatas.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
        this.total = res.totalCount
      })
    },
    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then(res => {
        this.address = res
      })
    },
    // 获得仓库类型数据
    getWareData() {
      this.$api.common.GetWarehouseTypeDataList().then(res => {
        this.wareType = res
      })
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead]
        heads.forEach(item => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width
            return
          }
        })
        this.saveHead(heads)
      }, 100)
    },
    // 表格操作事件
    optionsClick(key, data) {
      if (key === 'modify') {
        // 修改
        this.iswareEdit = true
        this.getWareInfo(data.warehouseID)
      } else if (key === 'locatorSeting') {
        this.isReservoir = true
        this.rowTabels = data
        this.addAreasForm.warehouseCode = data.warehouseCode
        this.addAreasForm.areaManager = data.warehouseManagerName
        this.locationSearch.warehouseCode = data.warehouseCode
        this.areasSearch.warehouseCode = data.warehouseCode
        this.addLocationForm.warehouseCode = data.warehouseCode
        this.getAllAreas()
        this.getMatchAllAreas()
      } else if (key === 'nullify') {
        const parmas = {
          entityID: data.warehouseID
        }
        this.$confirm('确定作废该仓库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.warehouse.DeleteWarehouse(parmas).then(() => {
            this.getAllwarehous()
            this.$message({
              message: '作废成功',
              type: 'success'
            })
          })
        })
      } else if (key === 'enable') {
        this.warehouseID = data.warehouseID
        data.warehouseState === 1 ? this.isEnabled = false : this.isEnabled = true
        this.setWareaSate()
      }
    },
    // 仓库启用禁用
    setWareaSate() {
      const parmas = {
        warehouseID: this.warehouseID,
        isEnabled: this.isEnabled
      }
      this.$confirm('确定启用/禁用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.warehouse.setWareState(parmas).then(() => {
          // 得到所有仓库列表
          this.getAllwarehous()
          this.$message({
            message: '设置成功',
            type: 'success'
          })
        })
      })
    },
    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {
        })
      }, 300)
    },
    // 获取仓库管理列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.warehouselist
      }
      this.$api.common.getAllTableHead(parmas).then(res => {
        res.sort(arraySort('columnSort'))
        this.tableHead = res
      })
    },
    // 批量操作方法
    handleCommand() {

    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    // 关闭弹框事件
    closeDialog() {
      // 关闭弹框的时候清空数据
      if (this.$refs.addWareForm) {
        this.$refs.addWareForm.resetFields()
      }
      if (this.$refs.editWareForm) {
        this.$refs.editWareForm.resetFields()
      }
      this.addWareForm = this.$options.data().addWareForm
      this.wareShowper = '' // 清空管理员展示字段内容
    },
    // 关闭新建库区弹框事件
    closeAreasDialog() {
      if (this.$refs.addAreasForm) {
        this.$refs.addAreasForm.resetFields()
      }
      this.addAreasForm.areaName = this.$options.data().addAreasForm.areaName
      this.addAreasForm.areaID = ''
    },
    // 库位弹框关闭事件
    closeLocationDialog() {
      if (this.$refs.addLocationForm) {
        this.$refs.addLocationForm.resetFields()
      }
      this.addLocationForm.areaShelfCount = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.areasOp{
  li{
    padding:8px 16px;
    cursor: pointer;
    &:hover{
      background: #F6F6F6;
    }
  }
}
.locationtable{
  padding-bottom: 52px;
  position: relative;
}
.locationPagina{
  position: absolute;
  border: none;
  bottom: 0px;
  left: 0px;
  width: auto;
}
.reservoirBox {
  height: 100%;
  .rgRewBox {
    width: calc(100% - 260px);
    height: 100%;
    position: relative;
    .btnCon{
      border-bottom: none;
    }
  }

  .lfReservoir {
    .reAll {
      .kuOP{
        display: none;
      }
      &:hover {
        background: #3f61f110;
        color: #3f61f1;
        .kuOP{
          display: block !important;
        }
      }
    }
    .reAll.crt{
      background: #3f61f110;
      color: #3f61f1;
    }
    .reAll.on {
      background: #3f61f110;
      color: #3f61f1;
    }

    .reList {
      padding-bottom: 120px;

      li {
        padding: 10px 16px;
        cursor: pointer;
      }
    }

    width: 260px;
    border-right: 1px #eee solid;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04)
  }

  .tipTT {
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
    background: #f5f6f9;
    padding: 0 16px;
    color: #999aaa;
    line-height: 33px;
  }
}
</style>
